<template>
	<view class="attendees">
		<view :style="{'height': `${statusBarHeight}px`, 'background-color': '#060143'}"></view>
		<uni-nav-bar backgroundColor="#060143;" color="#FFF" :title="$t('language.Attendees')" @clickLeft="goBack" left-icon="left"
			:border="false" />
		<view class="logo">
			<image class="logo-ic" src="@/static/logo.png" alt="" />
			<view class="lang-wrap" @click="changeLanguage">
				<image src="../../static/100.png" mode=""></image>
				<text>{{$t('locale.lang')}}</text>
			</view>
		</view>
		<view class="attendeesBox">
			<view class="searchBox">
				<input class="search" type="text" v-model="value" :placeholder="$t('language.search')"
					@search="onSearch" />
				<uni-icons type="search" size="28" color="#b88d5b"></uni-icons>
			</view>
			<view class="peopleGroup">
				<view v-show="isOnSearch == 0 && item.list.length != 0" class="peopleType"
					v-for="(item, index) in peopleList" :key="item.id">
					<view class="peopleTitle">{{ $t('language.name') == '中文' ? item.name : item.e_name }}<text
							style="color:#fff;font-size:28upx;white-space: nowrap;">{{ $t('language.meeting22') }} {{ item.list.length }} {{ $t('language.meeting23') }}</text>
					</view>
					<view class="peopleNum">
						<view class="peopelNumBox" v-for="(peopleNum, index) in item.list" :key="index"
							v-if="watchBool(item.showFlag,index)" @click="toUserInfo(peopleNum.user_id)">
							<!-- <view class="leftImg"><img :src="peopleNum.avatar" alt="" /></view> -->
							<view class="rightMessage">
								<view class="userName">
									{{peopleNum.en_name}} ({{peopleNum.ch_name}})
									<image v-if="peopleNum.sex == 1 || peopleNum.sex == 0" :src="`${baseUrl}/static/img/man.png`">
									</image>
									<image v-else class="woman" :src="`${baseUrl}/static/img/woman.png`"></image>
								</view>
								<view class="hotelAddress">
									{{$t('language.name') == '中文' ? peopleNum.hotel_name_zh : (peopleNum.hotel_code != '' ? peopleNum.hotel_code + ' ' : '') + (peopleNum.hotel_name != null ? peopleNum.hotel_name : '')}}
								</view>
							</view>
						</view>
						<view class="allPeople" @click="ShowList(index)" v-if="!item.showFlag && item.list.length >= 3">
							更多参会人员<uni-icons type="down" color="#999" size="18"></uni-icons></view>
						<view class="allPeople" @click="ShowList(index)" v-if="item.showFlag && item.list.length >= 3">
							收起<uni-icons type="up" color="#999"></uni-icons></view>
					</view>
					<!-- </transition> -->
				</view>

				<view v-show="isOnSearch == 1" style="padding:0 30upx;background:#060143;border-radius: 16upx;">
					<view class="peopelNumBox" v-for="(peopleNum, index) in SearchBox" :key="index" @click="toUserInfo(peopleNum.user_id)">
						<!-- <view class="leftImg"><img :src="peopleNum.avatar" alt="" /></view> -->
						<view class="rightMessage">
							<view class="userName">
								{{peopleNum.en_name}} ({{peopleNum.ch_name}})
								<image v-if="peopleNum.sex == '1'" :src="`${baseUrl}/static/img/man.png`"></image>
								<image v-else class="woman" :src="`${baseUrl}/static/img/woman.png`"></image>
							</view>
							<view class="hotelAddress">
								{{$t('language.name') == '中文' ? peopleNum.hotel_name_zh : (peopleNum.hotel_code != null ? peopleNum.hotel_code : '') + ' ' + (peopleNum.hotel_name != null ? peopleNum.hotel_name : '')}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import uniNavBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue"
	import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
	import {
		attendees_search,
		attendees
	} from "@/api/user";
	let timer = null
	export default {
		name: 'Attendees',
		components: {
			uniNavBar,
			uniIcons
		},
		data() {
			return {
				baseUrl: HTTP_REQUEST_URL,
				statusBarHeight: 44,
				count: 0,
				isOnSearch: 0,
				SearchBox: [],
				value: '',
				evenId: '',
				peopleList: []
			};
		},
		onLoad(o) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			let evenId = o.evenId;
			this.evenId = evenId;
			
			this.getPeople();
		},
		watch: {
			value: function(n, o) {
				const t = this
				if (timer != null) clearTimeout(timer)
				timer = setTimeout(() => {
					timer = null
					clearTimeout(timer)
					if(n.length == 0) {
						this.getPeople();
					} else {
						t.onSearch()
					}
				}, 1000)
			}
		},
		methods: {
			
			watchBool(showFlag, index) {
				if (!showFlag && index < 3) {
					return true
				} else if (!showFlag && index > 3) {
					return false
				} else if (showFlag) {
					return true
				}
			},
			async getPeople() {
				uni.showLoading({
					title: 'loading'
				})
				const response = await attendees({
					event_id: this.evenId
				});
				uni.hideLoading()
				if (response.code == 200) {
					let newResponse = response.data;
					for (let i in newResponse) {
						newResponse[i].showFlag = false;
					}
					this.peopleList = newResponse;
					this.isOnSearch = 0;
					this.count = response.count;
				} else {
					console.log(response.msg);
				}
			},
			onSearch() {
				attendees_search({
					event_id: this.evenId,
					key: this.value
				}).then(
					response => {
						if (response.code == 200) {
							this.SearchBox = response.data;
							this.isOnSearch = 1;
						}
					},
					err => {
						console.log(err)
					}
				);
			},
			onCancel() {
				this.isOnSearch = 0;
				this.value = '';
				this.SearchBox = [];
			},
			ShowList(index) {
				var that = this;
				var listData = that.peopleList;
				var showFlag = that.peopleList[index].showFlag; // 先用一个变量接收一个原来的状态值
				// listData.forEach(item => {
				//   //循环已经把所有的展开状态值清空
				//   item.showFlag = false;
				// });
				listData[index].showFlag = !showFlag;
				that.peopleList = listData;
			},
			toUserInfo(userid) {
				uni.navigateTo({
					url: '/pages/UserInfo/UserInfo?userid=' + userid + '&evenId=' + this.evenId
				})
			},
			goBack() {
				uni.navigateBack()
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					uni.setStorageSync('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					uni.setStorageSync('locale', 'zh')
				}
			}
		}
	};
</script>
<style lang="scss">
	.attendees {
		min-height: 100vh;
		background-color: #050033;
	}

	.logo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 30upx;
		background-color: #060143;

		.logo-ic {
			width: 78upx;
			height: 64upx;
		}

		.lang-wrap {
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 24upx;

			image {
				width: 30upx;
				height: 30upx;
				margin-right: 12upx;
			}
		}
	}

	page {
		background-color: #f0eeed;
	}

	.headerChangeLanguage {
		height: 100upx;
		background: #fff;
		padding: 0 30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2upx 4upx #ccc;
		width: 100%;
		box-sizing: border-box;
	}

	.logo image {
		width: 178upx;
		height: 30upx;
	}


	.language {
		flex-shrink: 0;
	}

	.langeageZh {
		height: 30upx;
		width: 86upx;
		background: url($image-base-url + '/static/img/EN-17.png') no-repeat;
		background-size: 86upx 30upx;
	}

	.langeageEn {
		height: 30upx;
		width: 86upx;
		background: url($image-base-url + '/static/img/CH-17.png') no-repeat;
		background-size: 86upx 30upx;
	}

	.searchBox {
		margin: 38upx 24upx 0 24upx;
		padding: 12upx;
		display: flex;
		align-items: center;
		border: 2upx solid #b88d5b;
		border-radius: 20upx;
		background: #060143;
		display: flex;
		justify-content: space-between;
		
		.search {
			width: 100%;
			color: #FFFFFF;
		}
		
		image {
			width: 32upx;
			height: 32upx;
			margin-right: 12upx;
		}
	}

	.peopleGroup {
		padding: 30upx;
	}

	.peopleType {}

	.peopleTitle {
		color: #fff;
		font-size: 36upx;
		padding-bottom: 20upx;
		display: flex;
		justify-content: space-between;
	}

	.peopleNum {
		background: #060143;
		box-sizing: border-box;
		padding: 30upx;
		border-radius: 16upx;
		margin-bottom: 30upx;
	}

	.peopelNumBox {
		height: 140upx;
		border-top: 1upx solid #333333;
		display: flex;
		align-items: center;
	}

	.peopleType .peopelNumBox:first-child {
		border-top: none;
	}

	.peopelNumBox .leftImg {
		width: 90upx;
		height: 90upx;
	}

	.leftImg image {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 8upx;
	}

	.rightMessage {
		width: 560upx;
		height: 90upx;
		box-sizing: border-box;
		// padding-left: 16upx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.rightMessage .userName {
		color: #fff;
		font-weight: bold;
	}

	.rightMessage .userName image {
		width: 20upx;
		height: 20upx;
		position: relative;
		top: 4upx;
	}

	.rightMessage .userName .woman {
		width: 14upx;
		height: 20upx;
	}

	.hotelAddress {
		color: #fff;
		font-size: 24upx;
		width: 100%;
	}

	.peopleNum {
		overflow: hidden;
		transition: all 0.5s ease;
	}

	.van-search__action {
		color: #666;
	}

	.allPeople {
		width: 220upx;
		height: 44upx;
		margin: 30upx auto 0;
		color: #999999;
		font-size: 24upx;
		border: 1upx solid #b88d5b;
		display: flex;
		justify-content: center;
		align-items: center;
		// background-color: #f0eeed;
		border-radius: 8upx;
	}
</style>